<template>
  <div v-if="dialogShow">
    <PopWindow v-show="dialogShow" title="项目流程设置" @close="closeForm" mode="edit" @updateHandle="updateHandle">
      <el-form ref="addForm" :model="formData" label-width="100px" size="small" :rules="formDataRules">
        <el-form-item label="项目名称" prop="flowName">
          <el-input v-model="formData.proName" readonly class="my-input" />
        </el-form-item>
        <el-form-item label="关联流程" prop="remark">
          <el-input v-model="formData.flowName" readonly class="my-input" />
        </el-form-item>

        <el-timeline>
          <el-timeline-item v-for="(state, index) in formData.phaselist" :key="index" placement="top"
            :timestamp="(index+1)+' '+ state.phaseName">
            <el-card>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="开工日期">
                    <el-date-picker v-model="state.startTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                      :disabled="state.vaildFlag >1" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="完工日期">
                    <el-date-picker v-model="state.endTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                      :disabled="state.vaildFlag >1" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="3" style="margin-left:20px;">
                  <el-button type="primary" size="mini" @click="addDomain(index)" v-if="state.vaildFlag <=1">添加师傅
                  </el-button>
                </el-col>
              </el-row>
              <el-row v-if="state.userlist.length>0" v-for="(user, indexs) in state.userlist" :key="indexs">
                <el-col :span="10">
                  <el-form-item label="师傅类型" :rules="{ required: true, message: '请选择师傅类型', trigger: 'blur'}">
                    <el-select v-model="user.ctcUserType" style="width: 100%;" :disabled="state.vaildFlag >1">
                      <el-option v-for="j in userTypeList" :key="j.val" :label="j.name" :value="j.val" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="师傅名称" :rules="{ required: true, message: '请选择师傅', trigger: 'blur'}">
                    <el-select v-model="user.perId" style="width: 100%;" :disabled="state.vaildFlag >1">
                      <el-option v-for="i in userList" :key="i.userId" :label="i.perName" :value="i.userId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <i class="el-icon-remove remove" @click="remove(index,indexs)"></i>
              </el-row>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        </el-form-item>
      </el-form>

    </PopWindow>
  </div>
</template>
<script>
  // 关联流程
  import {
    proFlowDetail,
    proFlowAdd
  } from '@/api/proList'
  import {
    getUserList
  } from '@/api/user'
  import PopWindow from '@/components/PopWindow'
  export default {
    name: "RelateFlow",
    components: {
      PopWindow
    },
    props: {
      dialogShow: {},
      infoData: {}
    },

    data() {
      return {
        reverse: true,
        userTypeList: [{
          val: 10,
          name: '其他师傅'
        }, {
          val: 11,
          name: '搬运师傅'
        }, {
          val: 12,
          name: '敲打师傅'
        }, {
          val: 13,
          name: '泥水师傅'
        }, {
          val: 14,
          name: '水电师傅'
        }, {
          val: 15,
          name: '防水师傅'
        }, {
          val: 16,
          name: '木作师傅'
        }],
        userList: [],
        formData: {
          flowName: '',
          proName: '',
          flowId: '',
          ctcId: '',
          phaselist: [{
            phaseId: '',
            startTime: '',
            endTime: '',
            vaildFlag: '',
            userlist: [{
              perId: '',
              ctcUserType: ''
            }]
          }],
        },
        // 表单验证规则
        formDataRules: {
          flowName: [{
              required: true,
              message: '请输入流程名称',
              trigger: 'blur'
            },
            {
              max: 100,
              message: '流程名称100个字内',
              trigger: 'blur'
            }
          ],
          remark: {
            max: 200,
            message: '备注200个字内',
            trigger: 'blur'
          }
        }
      }
    },
    computed: {},
    watch: {
      // 监听弹框打开
      dialogShow(newval) {
        if (newval) {
          this.formData.proName = this.infoData.proName
          this.formData.flowId = this.infoData.flowId
          this.formData.ctcId = this.infoData.ctcId
          this.proFlowDetail()
          this.getSelectList()
        }
      },
      dataShow(newval) {
        let that = this

      }
    },

    methods: {
      getSelectList() {
        // 获取下拉数据
        getUserList({
          pageIndex: 1, // 当前页码
          pageSize: 999, // 每页数量
          perType: 1 // 用户角色
        }).then(res => {
          this.userList = res.data
        })
      },
      proFlowDetail() {
        proFlowDetail({
          flowId: this.formData.flowId,
          ctcId: this.formData.ctcId,
        }).then(res => {
          this.formData.flowName = res.data.flowName
          this.formData.phaselist = res.data.phaselist
        })
      },
      addDomain(index) {
        this.formData.phaselist[index].userlist.push({
          ctcUserType: '',
          phaseRank: ''
        })
        // console.log(this.formData.phaselist[index].userlist)
      },
      remove(index, indexs) {
        this.formData.phaselist[index].userlist.splice(indexs, 1)
      },
      // 保存提交
      updateHandle() {
        let that = this
        that.formData.phaselist.forEach(items => {
          delete items.phaseRank
          delete items.phaseName
          delete items.vaildFlag
          let str = []
          items.userlist = items.userlist.filter(item => {
            return item.ctcUserType && item.perId
          })

        })
        that.$loadings()
        proFlowAdd(that.formData)
          .then(data => {
            that.$loadings().close()
            that.$message({
              type: 'success',
              message: '修改成功!'
            })
            that.closeForm() // 重置表单
            that.getListData()
          })
          .catch(() => {
            that.$loadings().close()
            that.closeForm() // 重置表单
          })
      },
      // 关闭弹框
      closeForm() {
        this.$emit("update:dialogShow", false)
        this.formData = {
          flowName: '',
          proName: '',
          flowId: '',
          ctcId: '',
          phaselist: [{
            phaseId: '',
            startTime: '',
            endTime: '',
            vaildFlag: '',
            userlist: [{
              perId: '',
              ctcUserType: ''
            }]
          }]
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  ul,
  dl {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .remove {
    margin-left: 10px;
    color: red;
    font-size: 16px;
    cursor: pointer;
    margin-top: 8px;
  }
</style>
